If you remember, in the last part of this blog series we tackled writing to a DynamoDB. This week, we’re tackling the editable table structures that will let us do a little ETL and massaging to our data before we push it to the dynamoDB.

To make this work, we’ll be using the HTMX JS library, a lightweight, easy to use JavaScript toolset. You can find it here: https://htmx.org/

So what does this library do? In short, it allows you to assign any verb to any dom object. In English, that means that, for example, you can make a div generate a post or get directive. HTMX also allows you to target a different DOM object for whatever comes back from your request. When building out SPAs, normally you set one DIV as a viewport and pull in data from a page into it.

But that’s not what we’re doing here today. Instead, what we’ll be doing is building out a table where each row can be edited inline and then submitted for a write. What does that look like?

Well, first, make sure that you’re including the HTMX library in your page.

Then, when you build your table, it is going to look like this:

<table>
<cfoutput >
<form name=”form_id_01″>
<tr id=”td_id_01″>

<td>
<input name=”name” value=”#name_value#” />
</td>
<td>
<button hx-post=”savedata.cfm” hx-target=”##td_id_01″>SAVE ROW</button>
</td>
</tr>
</form>
</cfoutput>
</table>

Then, the page savedata.cfm would have a section at the top that wrote to dynamo, and would return

<td>
#name_value#”
</td>
<td>
SAVED
</td>

Because you’re targeting the TR, your page return will replace everything inside that dom object. In this case, since we’ve saved and written this row, I want to replace the row with read-only info and a confirmation. I might also change the color. Non-psuedo-code will be made available when we put all of this together.

Next time we handle the last part of this (or actually the FIRST part) which is pulling the data rows in from Google Sheets using GraphQL. See you next week!